<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box1{
            width: 100px;
            height: 100px;
            background-color: pink;
            /*position: relative;*/
            /*position: fixed;*/
            position: absolute;
            left: 100px;
            top:200px;

        }
        #box2{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            position: relative;
            left: 300px;
        }
    </style>
</head>
<body>
<!--position 属性指定了元素的定位类型。
position 属性的五个值：
  static HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
  relative  特点：原本空间不会释放 相对定位 相对原位置 不会脱离文档流
  fixed 固定定位    脱离文档流   浏览器窗口定位
  absolute  绝对定位    含有position属性的父节点作为参照点 脱离文档流
  sticky
  -->

<div id="box2"><div id="box1"></div></div>
<div style="width: 200px;height: 2000px;background-color: yellow"></div>
<div id="box4"></div>

</body>
</html>